@(project: String,
  prefixes: org.silkframework.config.Prefixes,
  knownPrefixes: org.silkframework.config.Prefixes)

@widgets.dialog(title = "Edit Prefixes", submitLabel = "Save Prefixes") {
  <table id="prefixTable" class="mdl-data-table mdl-js-data-table" style="width: 500px">
    <thead>
      <tr>
        <th class="mdl-data-table__cell--non-numeric">Prefix</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
    @for(prefix <- prefixes) {
      <tr class="prefix_dialog-row">
        <td class="mdl-data-table__cell--non-numeric">
          <div class="mdl-textfield mdl-js-textfield prefix_dialog-prefix" style="width: 400px" >
            <input class="mdl-textfield__input" type="text" value="@prefix._1: @prefix._2"/>
          </div>
        </td>
        <td>
          <button type="button" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab" onclick="$(this).parent().parent().remove()">
            <i class="material-icons">remove</i>
          </button>
        </td>
      </tr>
    }
      <tr>
        <td></td>
        <td>
          <button type="button" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab" onclick="addRow()">
            <i class="material-icons">add</i>
          </button>
        </td>
      </tr>
    </tbody>
  </table>

  <script>
    // Array which contains all known prefixes
    var availablePrefixes = [
      @for(prefix <- knownPrefixes) {
        "@prefix._1: @prefix._2",
      }
    ];

    $("#prefixTable input").autocomplete({ appendTo: '#dialog-form', source: availablePrefixes });

    //Adds a new prefix row
    function addRow() {
      var row = '<tr class="prefix_dialog-row"> \
        <td class="mdl-data-table__cell--non-numeric"> \
          <div class="mdl-textfield mdl-js-textfield prefix_dialog-prefix" style="width: 400px"> \
            <input class="mdl-textfield__input" type="text" value=""/> \
          </div> \
        </td> \
        <td> \
          <button type="button" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab" onclick="$(this).parent().parent().remove()"> \
            <i class="material-icons">remove</i> \
          </button> \
        </td> \
      </tr>';
      $('#prefixTable tbody tr').last().before(row);
      $("#prefixTable input").autocomplete({ appendTo: '#dialog-form', source: availablePrefixes });
    }

    function submit() {
      var data = $('#prefixTable .prefix_dialog-row input').map(function() {
        var value = this.value;
        var i = value.indexOf(':');
        return { name: value.substr(0, i).trim(), value: value.substr(i + 1).trim() };
      });

      $.ajax({
        type: 'PUT',
        url: '@config.baseUrl/workspace/projects/@project/prefixes',
        data: data,
        success: function(data) {
          closeDialog();
        },
        error: function(request) {
          alert(request.responseText);
        }
      });
    }
  </script>
}